<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盘龙河七彩公益健康跑报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{:sysconf('cdn_url')}/ticket/css/reg.css?t=20231028" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="{:sysconf('cdn_url')}/ticket/js/jquery-2.1.3.min.js"></script>

</head>
<body>
<style>
    .select {
        -webkit-appearance: none;
        padding: calc(var(--input-padding) * 1.5) var(--input-padding);
        font-family: var(--form-font-family);
        font-size: 1rem;
        width: 100%;
        color: var(--input-text-color);
        background-color: var(--input-bg-color);
        outline: none;
        border: 1px solid var(--input-border-color);
        border-radius: var(--input-border-radius);
        box-shadow: rgba(0, 0, 0, 0.05) 0 0.5rem 1rem -0.25rem;
        transition: border-color var(--base-transition), box-shadow var(--base-transition), transition var(--base-transition);
    }
    
    /*select:not(:placeholder-shown) + label {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }*/

</style>
<section>
    <h1>盘龙河七彩公益健康跑报名</h1>

    <form>
        <input type="hidden" id="cate_id" value="3">
        <div class="form-group">
            <input type="text" id="name" placeholder="姓名">
            <label for="name">姓名</label>
        </div>
        <div class="form-group">

            <select class="select" id="sex" placeholder="性别">
                <option value="0">选择性别</option>
                <!--{foreach ["1"=>"男","2"=>"女"] as $k=>$v}-->
                <option value="{$k}">{$v}</option>
                <!--{/foreach}-->
            </select>
            <label for="sex">性别</label>
        </div>
        <div class="form-group">
            <input type="text" id="address" placeholder="年龄">
            <label for="address">年龄</label>
        </div>

        <div class="form-group">
            <input type="text" id="intro" placeholder="健康状况">
            <label for="intro">健康状况</label>
        </div>
        <div class="form-group">
            <input type="text" id="mobile" maxlength="11" placeholder="手机号码">
            <label for="mobile">手机号码</label>
        </div>
        <button type="button" onclick="reg()">参与报名</button>
    </form>
</section>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>


<script>
    function validateIdCard(idCard) {
        // 正则表达式
        var regExp = /^\d{17}[\dXx]$/;
        return regExp.test(idCard);
    }

    function reg() {
        var cate_id = $("#cate_id").val();
        var name = $("#name").val();
        var mobile = $("#mobile").val();
        var sex = $("#sex").val();
        var address = $("#address").val();
        var intro = $("#intro").val();

        if (name == '') {
            alert('姓名不能为空')
            return false;
        } else if (sex <=0) {
            alert('性别不能为空')
            return false;
        } else if (address == '') {
            alert('年龄不能为空')
            return false;
        } else if (intro == '') {
            alert('健康状态不能为空')
            return false;
        } else if (mobile == '') {
            alert('手机号不能为空')
            return false;
        }else if (!/^1[3456789]{1}[0-9]{9}$/.test(mobile) && mobile !== '') {
            alert('请输入正确的手机号')
            return false;
        }

        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "/index/ticket/reg3",
            data: {
                cate_id: cate_id,
                name: name,
                mobile: mobile,
                sex: sex,
                address: address,
                intro: intro
            },
            success: function (data) {
                if (data.code == 0) {
                    alert(data.message)
                    self.location = '/index/ticket/myticket?cate_id=' + cate_id;//确定按钮跳转地址

                } else if (data.code == 1) {
                    alert(data.message)
                    return false
                } else {
                    alert(data.message)
                    return false
                }

            }
        });
    }

</script>
{include file="ticket/footer"/}
</body>
</html>
